<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">	
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>


<script>
	body { font-size: 140%; }
</script>
</head>
 
<body>
<input type="button" id="addRow" class="btn btn-primary" value="Them dong">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Ngay nghi</th>
                <th>Thoi gian nghi</th>
                <th>Bat dau</th>
                <th>Ket thuc</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Ngay nghi</th>
                <th>Thoi gian nghi</th>
                <th>Bat dau</th>
                <th>Ket thuc</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tet duong lich</td>
                <td>4 ngay</td>
                <td>01/01/2015</td>
                <td>02/01/2015</td>
            </tr>
            <tr>
                <td>Tet nguyen dan</td>
                <td>14 ngay</td>
                <td>12/02/2015</td>
                <td>25/02/2015</td
            </tr>
            <tr>
                <td>Gio To Hung Vuong</td>
                <td>0 ngay</td>
                <td></td>
                <td></td
            </tr>
            <tr>
                <td>30/04-01/05</td>
                <td>4 ngay</td>
                <td>30/04/2015</td>
                <td>03/05/2015</td
            </tr>
            <tr>
                <td>Nghi he</td>
                <td>6 ngay</td>
                <td>22/06/2015</td>
                <td>27/06/2015</td
            </tr>
            <tr>
                <td>Quoc khanh 02/09</td>
                <td>1 ngay</td>
                <td>02/09/2015</td>
                <td>03/09/2015</td
            </tr>
        </tbody>
    </table>
<script>
	$(document).ready(function() { 
	
	//Su dung tu thu vien datable
	$('#example').DataTable(); 
	
    	var t = $('#example').DataTable();
	var counter = 1;
 
    	$('#addRow').on( 'click', function () {
        	t.row.add( [
            		counter +'.1',
            		counter +'.2',
            		counter +'.3',
            		counter +'.4',
            		counter +'.5'
        	] ).draw();
 
        	counter++;
    	} );
 
    	//Tu dong them mot dong moi
    	//$('#addRow').click();
	} );
</script>
</body>
</html>